<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smile</title>
    <!-- 引入 bootstar.css -->
   <link rel="stylesheet" th:href="@{/static/css/bootstrap.css}">
   <script src="/static/js/scriptindex.js"></script>
   <script src="/static/js/jquery.min.js"></script>
   <script src="/static/js/bootstrap.js"></script>
   
</head>
<body>
<script type="text/javascript">
   function bj(){
	  var opacity = document.getElementById("daohang").style.opacity;
	  if(opacity<1){
	    document.getElementById("daohang").style.opacity=1;
	  }else{
	    document.getElementById("daohang").style.opacity=0.8;
	  }
	 
	  if( ($("#fill").css("display"))!="none"){
	    $("#fill").css("display","none");
	  }else{
	    $("#fill").css("display","list-item");
	  }
	  }
	  
	  
	  
	  	 //这个不是写在首页，写在子页面（子页面才能返回，写在首页点击返回就是退出）
//不用引入mui.js，都是h5方法
document.addEventListener('plusready', function() {
    var webview = plus.webview.currentWebview();
    plus.key.addEventListener('backbutton', function() {
        webview.canBack(function(e) {
            if(e.canBack) {
                webview.back();
            } else {
                webview.close(); //hide,quit
                //plus.runtime.quit();
            }
        })
    });
});
	  
</script>

   <!-- 头部的模板 -->
<div th:replace="fragment/head::head"></div> 
    
   
    

    
    <div class="container mt-4">
    
      <div class="row">
        <div class="col-12">
        
         <div class="card text-center"> 
               <div class="card-body ">
                 <div class="layui-anim layui-anim-down card-title"><h4>博主Smile的歌单，欢迎收听</h4></div>
               </div>
           </div>
         
          </div>
      </div>
    
       <div class="row" style="margin-top: 20px">
         <div   class="col-12 col-sm-12 col-md-12">
          <div class="card">
           <div class="card-body ">  
             <div class="card-title" ><h4> 🐧<b> QQ音乐站内评论999+网络歌曲 </b></h4></div>   
             <meting-js 
	           server="tencent" 
	           type="playlist" 
	           id="4182434785"
	           loop="all"
	           order="random"
	           preload="auto">
            </meting-js>
        </div> 
    </div> 
         </div>
   <!-- 对应row -->      
   </div>
   
   
          <div class="row" style="margin-top: 20px">
         <div   class="col-12 col-sm-12 col-md-12">
          <div class="card">
           <div class="card-body ">  
             <div class="card-title" ><h4> 🐧<b> QQ音乐 2019年度歌单top10</b> </h4></div>   
             <meting-js 
	           server="tencent" 
	           type="playlist" 
	           id="7743877378"
	           loop="all"
	           order="random"
	           preload="auto">
            </meting-js>
        </div> 
    </div> 
         </div>
   <!-- 对应row -->      
   </div>
   
   
   
          <div class="row" style="margin-top: 20px">
         <div   class="col-12 col-sm-12 col-md-12">
          <div class="card">
           <div class="card-body ">  
             <div class="card-title" ><h4> <b>☁ 网易云很chill的R&B歌单 节奏布鲁斯 欧美 </b></h4></div>   
             <meting-js 
	           server="tencent" 
	           type="playlist" 
	           id="6620086396"
	           loop="all"
	           order="random"
	           preload="auto">
            </meting-js>
        </div> 
    </div> 
         </div>
   <!-- 对应row -->      
   </div>




    </div>
    
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
	<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
	<!-- require MetingJS -->
	<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
  </body>
  </html>
    